<template>
  <div class="mod-sys__user">
    <el-table :data="institutionqaqList" border
              @sort-change="dataListSortChangeHandle"
              style="width: 100%">

      <el-table-column prop="certificateFile" label="资质档案" align="center">
        <template v-slot="scope">
          <el-image
            :src="scope.row.certificateFile"
            :preview-src-list="previewList"
            :initial-index="getImageIndex(scope.$index)"
            style="width: 70px; height: 70px; cursor: pointer;"
            fit="contain"
            :preview-teleported="true"
            :hide-on-click-modal="true"
            @click="setPreviewList(scope.row.certificateFile, scope.$index)">
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
                <span>图片加载失败</span>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>

      <el-table-column prop="qualificationInstructions" label="资质说明"
                       sortable="custom" header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="institutionName" label="机构"
                       header-align="center"
                       align="center"></el-table-column>
      <el-table-column prop="isExamine" label="状态" sortable="custom" header-align="center" align="center">
        <template v-slot="scope">
          <el-tag v-if="scope.row.isExamine === 1" size="small" type="success">已通过</el-tag>
          <el-tag v-if="scope.row.isExamine === 2" size="small" type="danger">未通过</el-tag>
          <el-tag v-if="scope.row.isExamine === 0" size="small" type="warning">待审核</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="350">
        <template v-slot="scope">
          <el-button v-if="checkPermission('sdl:institutionqaq:examine') && !scope.row.isExamine" type="primary"
                     @click="submitExamine(scope.row.qualificationId,true)">通过
          </el-button>
          <el-button v-if="checkPermission('sdl:institutionqaq:examine') && !scope.row.isExamine" type="danger"
                     @click="submitExamine(scope.row.qualificationId,false)">不通过
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="dataFrom.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="dataFrom.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import baseService from "@/service/baseService";
import { camelToSnake } from "@/utils/utils";
import { Picture } from '@element-plus/icons-vue'

export default {
  components: {
    Picture
  },
  data() {
    return {
      total: "",
      dataFrom: {
        page: 1,
        limit: 10,
        order: "", // 排序规则
        orderField: "" // 排序依据
      },
      institutionqaqList: [], // 查询到的数据集
      from: {
        qualificationId: "",
        isExamine: 0 // 默认是0,待审核
      },
      previewList: [],
      currentImageIndex: 0
    };
  },
  created() {
    this.getDataFormRef();
  },
  methods: {
    setPreviewList(img, index) {
      this.previewList = this.institutionqaqList.map(item => item.certificateFile)
      this.currentImageIndex = index
    },
    getImageIndex(index) {
      return this.currentImageIndex
    },
    checkPermission(key) {
      return this.$hasPermission(key);
    },
    handleSizeChange(val) {
      this.dataFrom.limit = val;
      this.getDataFormRef();
    },
    handleCurrentChange(val) {
      this.dataFrom.page = val;
      this.getDataFormRef();
    },
    dataListSortChangeHandle(val) {
      if (val.order == "ascending") {
        this.dataFrom.order = "asc";
      } else if (val.order == "descending") {
        this.dataFrom.order = "desc";
      } else {
        this.dataFrom.order = "";
      }
      this.dataFrom.orderField = camelToSnake(val.prop);
      this.getDataFormRef();
    },
    getDataFormRef() {
      baseService.get("sdl/institutionqaq/page", this.dataFrom).then(res => {
        if (res.code == 0) {
          this.total = res.data.total;
          this.institutionqaqList = res.data.list;
        }
      });
    },
    submitExamine(id, b) {
      const action = b ? "通过" : "不通过";
      this.$confirm(`确定要${action}此资质审核吗?`, "提示", {
        confirmButtonText: action,
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.from.qualificationId = id;
        this.from.isExamine = b ? 1 : 2;

        baseService.post("sdl/institutionqaq/submit/examine", this.from).then(res => {
          if (res.code == 0) {
            this.getDataFormRef();
            ElMessage.success("提交成功!");
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消提交"
        });
      });
    }
  }
};
</script>

<style scoped>
.mod-sys__user {
  padding: 20px;
}

.image-error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  color: #999;
  font-size: 12px;
}

.image-error .el-icon {
  font-size: 20px;
  margin-bottom: 5px;
}

.el-table {
  margin-bottom: 20px;
}
.el-image-viewer__wrapper {
  z-index: 9999 !important;
}

.el-table__fixed-right {
  z-index: 1 !important;
}
</style>
